import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// import { resolve } from "path";
import path from 'path';
import { fileURLToPath, URL } from "node:url";
import WindiCSS from "vite-plugin-windicss";
import AutoImport from "unplugin-auto-import/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

const pathSrc = path.resolve(__dirname, "src");
export default defineConfig({
  plugins: [
    vue(), 
    WindiCSS(),
    createSvgIconsPlugin({
      // 缓存图标位置
      iconDirs: [path.resolve(pathSrc, "assets/icons")],
      symbolId: "icon-[dir]-[name]",
    }),
    AutoImport({
      // 导入Vue函数
      imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
      resolvers: [
        // 导入ElementPlus函数
        ElementPlusResolver(),
      ],
      eslintrc: {
        enabled: false,
        filepath: "./.eslintrc-auto-import.json",
        globalsPropValue: true,
      },
      vueTemplate: true,
      dts: false,
    }),
    Components({
      resolvers: [
        // 导入ElementPlus组件
        ElementPlusResolver(),
      ],
      // 指定自定义组件位置
      dirs: ["src/components", "src/**/components"],
      dts: false,
    }),
  ],
  //静态资源服务的文件夹
  publicDir: "public",
  base: "./",
  resolve: {
    alias: {
      "@": path.resolve("./src"),
      // '@': fileURLToPath(new URL('./src', import.meta.url)),
      "@_c": path.resolve("src/components"),
    },
    // 导入时想要省略的扩展名列表
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
  },
  //预览设置  npm run build　打包之后，会生成dist文件 然后运行npm run preview；vite会创建一个服务器来运行打包之后的文件
  preview: {
    port: 4000, //端口号
    host: "localhost",
    open: true, //是否自动打开浏览器
  },
  css: {
    preprocessorOptions: {
      // 定义全局 SCSS 变量
      scss: {
        api: "modern-compiler",
        additionalData: `
          @use "@/styles/variables.scss" as *;
          @use "element-plus/theme-chalk/src/index.scss" as *; 
        `,
      },
    },
  },
  //开发配置  npm run dev
  server: {
    port: 3001, //端口号
    strictPort: true, //是否是严格的端口号，如果true，端口号被占用的情况下，vite会退出
    host: "localhost",
    cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源
    // https: false,//是否支持http2 如果配置成true 会打开https://localhost:3001/xxx;
    open: true, //是否自动打开浏览器
    // 反向代理 跨域配置
    proxy: {
      "/api": {
        target: "https://xxxx.com/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  // 打包配置 npm run build
  build: {
    //指定输出路径
    outDir: "dist",
    //生成静态资源的存放路径
    assetsDir: "assets",
    //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    assetsInlineLimit: 4096,
    //启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    //构建后是否生成 source map 文件
    sourcemap: false,
    //自定义底层的 Rollup 打包配置
    rollupOptions: {
      input: {
        //可以配置多个，表示多入口
        index: path.resolve(__dirname, "index.html"),
        // project:resolve(__dirname,"project.html")
      },
      output: {
        // chunkFileNames:'static/js/[name]-[hash].js',
        // entryFileNames:"static/js/[name]-[hash].js",
        // assetFileNames:"static/[ext]/name-[hash].[ext]"
      },
    },
    //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    emptyOutDir: true,
    //chunk 大小警告的限制
    chunkSizeWarningLimit: 500,
  },
});
